<template>
  <div>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <!-- 输入备忘，使用 v-model 绑定 newTodo -->
        <!-- 监听 keyup 事件，同时使用修饰器 .enter，按 Enter 键时事件才触发 -->
        <input class="new-todo" placeholder="next todo?" v-model="newTodo" v-autofocus @keyup.enter="addTodo">
      </header>

      <section class="main" v-show="todos.length">
        <transition-group
            name="staggered-fade"
            tag="ul"
            v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave" class="todo-list"
            >
          <!-- 查看所有备忘 -->
          <!-- v-for 遍历所有备忘，key 绑定备忘 id，class 绑定样式 -->
          <li v-for="todo in computedTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed }">
            <!-- 使用 todo-item 组件 -->
            <!-- “双向绑定”备忘内容 title 和备忘已完成状态 completed -->
            <!-- 监听 delete 事件 -->
            <todo-item
              v-bind:title.sync="todo.title"
              v-bind:completed.sync="todo.completed"
              @delete="removeTodo(todo)">
            </todo-item>
          </li>
        </transition-group>
        <footer class="footer" v-show="todos.length">
          <span class="todo-count">
            <!-- remaining 计算剩余的未完成的数量，pluralize 用来过滤单位是否要负数 -->
            <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
          </span>
          <ul class="filters">
            <!-- exact 设置精确匹配，active-class 设置激活状态 -->
            <li><router-link :to="{query: {state: ''}}" active-class="selected" exact >All</router-link></li>
            <li><router-link :to="{query: {state: 'active'}}" active-class="selected" exact >Active</router-link></li>
            <li><router-link :to="{query: {state: 'completed'}}" active-class="selected" exact >Completed</router-link></li>
          </ul>
          <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
            Clear completed
          </button>
        </footer>
      </section>
    </section>
  </div>
</template>

<script>
import TodoItem from "../components/TodoItem";
let id = 1;
export default {
  components: {
    "todo-item": TodoItem
  },

  data() {
    return {
      // all todos
      todos: JSON.parse(localStorage.getItem("todos") || "[]"),
      // 新增的备忘
      newTodo: "",
      // 弹窗信息
      dialogInfo: {}
    }
  },

  watch: {
    // listening todos
    todos(newVal) {
      // write to localStorage when updating
      localStorage.setItem("todos", JSON.stringify(newVal));
    }
  },

  computed: {
    // 计算剩余未完成的备忘
    remaining() {
      return this.todos.filter(x => !x.completed).length;
    },

    computedTodos() {
      const state = this.$route.query.state;
      const filterTodos = this.todos.filter(x => {
        if (state === "active") {
          return !x.completed;
        } else if (state === "completed") {
          return x.completed;
        } else {
          // all
          return true;
        }
      });
      // 再过滤展示匹配的内容
      return filterTodos.filter((item) => {
        return item.title.toLowerCase().indexOf(this.newTodo.toLowerCase()) !== -1;
      })
    }
  },

  filters: {
    // 计算单位
    pluralize(num) {
      return num > 1 ? "items" : "item";
    }
  },

  methods: {
    addTodo() {
      // empty new todo
      if(!this.newTodo) {
        return;
      }
      // 往备忘列表中新增一条
      // 最后新增的备忘插在最前面，所以使用 unshift 而不是 push
      this.todos.unshift({
        id: id++,
        title: this.newTodo,
        completed: false,
        date: ""
      });

      this.newTodo = "";
    },

    // 删除备忘
    removeTodo(todo) {
      const index = this.todos.findIndex(x => x.id === todo.id);
      this.todos.splice(index, 1);
    },

    // 删除已完成的备忘
    removeCompleted() {
      this.todos = this.todos.filter(x => !x.completed);
    },

    // before enter
    beforeEnter(el) {
      el.style.opacity = "0";
      el.style.height = "0";
    },

    // 与 CSS 结合时使用
    enter(el, done) {
      let delay = el.dataset.index * 150;
      setTimeout(function () {
        // eslint-disable-next-line
        Velocity(
            el,
            { opacity: 1, height: "58px"},
            { complete: done }
        )
      }, delay);
    },

    // 与 CSS 结合时使用
    leave(el, done) {
      let delay = el.dataset.index * 150;
      setTimeout(function () {
        // eslint-disable-next-line
        Velocity(
            el,
            { opacity: 0, height: 0},
            { complete: done }
        )
      }, delay);
    }
  },

  directives: {
    autofocus: {
      // 被绑定元素插入父节点时调用
      inserted: function (el) {
        // el: 指令所绑定的元素，可以用来直接操作 DOM
        el.focus();
      }
    }
  }
}
</script>

<style>
@import "https://unpkg.com/todomvc-app-css@2.1.0/index.css";
*, ::after, ::before {
  box-sizing: inherit;
}
</style>